<template>
  <view class="world">
    <view class="achievements">
      <h2>个人成就</h2>
      <view v-for="achievement in achievements" :key="achievement.id" class="achievement">
        <image :src="achievement.icon" class="achievement-icon" />
        <view class="achievement-details">
          <h3>{{ achievement.name }}</h3>
          <p>{{ achievement.description }}</p>
        </view>
      </view>
    </view>

    <view class="posts">
      <h2>社区互动</h2>
      <view v-for="post in posts" :key="post.id" class="post">
        <h3>{{ post.title }}</h3>
        <p>{{ post.content }}</p>
        <view class="comments">
          <h4>评论</h4>
          <view v-for="comment in post.comments" :key="comment.id" class="comment">
            <p>{{ comment.text }}</p>
          </view>
          <input v-model="newComment" type="text" placeholder="添加评论" @keyup.enter="addComment(post.id)" />
        </view>
        <view class="post-actions">
          <button @click="addComment(post.id)">评论</button>
        </view>
      </view>
    </view>

    <view class="post-form">
      <h2>发布成就</h2>
      <input v-model="newAchievement.name" type="text" placeholder="成就名称" />
      <input v-model="newAchievement.icon" type="text" placeholder="图标URL" />
      <textarea v-model="newAchievement.description" placeholder="成就描述"></textarea>
      <button @click="addAchievement">发布成就</button>
    </view>

    <view class="post-form">
      <h2>发布帖子</h2>
      <input v-model="newPost.title" type="text" placeholder="帖子标题" />
      <textarea v-model="newPost.content" placeholder="帖子内容"></textarea>
      <button @click="postToCommunity">发布帖子</button>
    </view>
  </view>
</template>

<script>
export default {
data() {
  return {
    achievements: [
      { name: '成就1', icon: 'https://via.placeholder.com/50', description: '这是成就1的描述' },
      { name: '成就2', icon: 'https://via.placeholder.com/50', description: '这是成就2的描述' }
    ],
    posts: [
      {
        id: 1,
        title: '帖子1',
        content: '这是帖子1的内容',
        comments: [
          { id: 1, text: '评论1' },
          { id: 2, text: '评论2' }
        ]
      },
      {
        id: 2,
        title: '帖子2',
        content: '这是帖子2的内容',
        comments: []
      }
    ],
    newComment: '',
    newAchievement: {
      name: '',
      icon: '',
      description: ''
    },
    newPost: {
      title: '',
      content: ''
    }
  };
},
methods: {
  addComment(postId) {
    const post = this.posts.find(p => p.id === postId);
    if (post && this.newComment.trim()) {
      post.comments.push({
        id: Date.now(),
        text: this.newComment
      });
      this.newComment = '';
    }
  },
  addAchievement() {
    if (this.newAchievement.name.trim() && this.newAchievement.icon.trim() && this.newAchievement.description.trim()) {
      this.achievements.push({
        id: Date.now(),
        name: this.newAchievement.name,
        icon: this.newAchievement.icon,
        description: this.newAchievement.description
      });
      this.newAchievement = {
        name: '',
        icon: '',
        description: ''
      };
    }
  },
  postToCommunity() {
    if (this.newPost.title.trim() && this.newPost.content.trim()) {
      this.posts.push({
        id: Date.now(),
        title: this.newPost.title,
        content: this.newPost.content,
        comments: []
      });
      this.newPost = {
        title: '',
        content: ''
      };
    }
  }
}
};
</script>

<style>
.world {
  padding: 20px;
}

.achievements, .posts, .post-form {
  margin-bottom: 40px;
}

.achievement, .post {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.achievement-icon {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.achievement-details {
  display: inline-block;
}

.comment {
  margin-bottom: 5px;
}

input, textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>
